<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>媒体对象(针对评论和文章比较有用)</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="media">
            <div class="media-left media-middle pull-right">
                <a href="#">
                    <img src="top2013_01.jpg" alt=""/>
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">消息</h4>
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
            </div>
        </div>

        <ul class="media-list">
            <li class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="top2013_01.jpg" alt=""/>
                    </a>
                </div>
                <div class="media-body">
                    <h4>这是一个标题</h4>
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果

                </div>
            </li>
            <li class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="top2013_01.jpg" alt=""/>
                    </a>
                </div>
                <div class="media-body">
                    <h4>这是一个标题</h4>
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    <ul class="media-list">
                        <li class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img src="top2013_01.jpg" alt=""/>
                                </a>
                            </div>
                            <div class="media-body">
                                <h4>这是一个标题</h4>
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果

                            </div>
                        </li>
                        <li class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img src="top2013_01.jpg" alt=""/>
                                </a>
                            </div>
                            <div class="media-body">
                                <h4>这是一个标题</h4>
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果

                            </div>
                        </li>
                        <li class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img src="top2013_01.jpg" alt=""/>
                                </a>
                            </div>
                            <div class="media-body">
                                <h4>这是一个标题</h4>
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                                这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果

                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="media">
                <div class="media-left">
                    <a href="#">
                        <img src="top2013_01.jpg" alt=""/>
                    </a>
                </div>
                <div class="media-body">
                    <h4>这是一个标题</h4>
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果
                    这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果这是一个消息效果

                </div>
            </li>
        </ul>
    </div>
</body>
</html>